<template>
  <view class="test-container">
    <view class="title">测试可复用组件</view>
    <view class="components-row">
      <drawer-tab iconType="user" textContent="账号资料" iconSize="30"></drawer-tab>
      <drawer-tab iconType="settings" textContent="设置" iconSize="30" iconColor="#007aff"></drawer-tab>
      <drawer-tab iconType="message" textContent="消息" iconSize="30" iconColor="#ff9500"></drawer-tab>
    </view>

    <view class="dynamic-change">
      <text class="subtitle">动态更改组件属性</text>
      <button class="change-btn" @click="changeIconType">更改图标类型</button>
      <button class="change-btn" @click="changeTextContent">更改文本内容</button>
      <button class="change-btn" @click="changeIconSize">更改图标大小</button>
      <button class="change-btn" @click="changeIconColor">更改图标颜色</button>
    </view>

    <drawer-tab
      :iconType="currentIconType"
      :textContent="currentTextContent"
      :iconSize="currentIconSize"
      :iconColor="currentIconColor"
    ></drawer-tab>
    <view class="list-section">
      <text class="title">列表组件颜色示例</text>
      <view class="list-examples">
        <text class="subtitle">默认颜色</text>
        <list text="默认颜色示例" secondaryText="这是默认颜色" icon="right"></list>
      </view>
      <view class="list-examples">
        <text class="subtitle">自定义主文本颜色</text>
        <list text="红色文本示例" secondaryText="这是默认次要文本颜色" icon="right" textColor="#ff3b30"></list>
      </view>
      <view class="list-examples">
        <text class="subtitle">自定义次要文本颜色</text>
        <list text="默认主文本颜色" secondaryText="这是蓝色次要文本" icon="right" secondaryTextColor="#007aff"></list>
      </view>
      <view class="list-examples">
        <text class="subtitle">自定义图标颜色</text>
        <list text="默认文本颜色" secondaryText="这是默认次要文本颜色" icon="right" iconColor="#34c759"></list>
      </view>
      <view class="list-examples">
        <text class="subtitle">自定义所有颜色</text>
        <list text="紫色文本示例" secondaryText="这是橙色次要文本" icon="right" textColor="#af52de" secondaryTextColor="#ff9500" iconColor="#34c759"></list>
      </view>
      <text class="subtitle" style="margin-top: 30rpx;">使用方法：在list组件中添加textColor、secondaryTextColor和iconColor属性</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import DrawerTab from '@/components/drawer-tab.vue';
import List from '@/components/list.vue';

// 动态属性示例
const currentIconType = ref('heart');
const currentTextContent = ref('收藏');
const currentIconSize = ref(36);
const currentIconColor = ref('#ff3b30');

// 更改图标类型
const changeIconType = () => {
  const iconTypes = ['user', 'settings', 'message', 'heart', 'star', 'bookmark'];
  const randomIndex = Math.floor(Math.random() * iconTypes.length);
  currentIconType.value = iconTypes[randomIndex];
};

// 更改文本内容
const changeTextContent = () => {
  const textContents = ['个人中心', '系统设置', '消息通知', '我的收藏', '我的点赞', '历史记录'];
  const randomIndex = Math.floor(Math.random() * textContents.length);
  currentTextContent.value = textContents[randomIndex];
};

// 更改图标大小
const changeIconSize = () => {
  currentIconSize.value = Math.floor(Math.random() * 20) + 24; // 24-44之间的随机数
};

// 更改图标颜色
const changeIconColor = () => {
  const colors = ['#333333', '#007aff', '#ff9500', '#ff3b30', '#34c759', '#af52de'];
  const randomIndex = Math.floor(Math.random() * colors.length);
  currentIconColor.value = colors[randomIndex];
};
</script>

<style lang="scss">
.test-container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.components-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 40rpx;
}

.dynamic-change {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 30rpx;
}

.subtitle {
  font-size: 30rpx;
  margin-bottom: 20rpx;
}

.list-section {
  width: 100%;
  margin-top: 50rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list-examples {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}

.change-btn {
  width: 80%;
  margin-bottom: 15rpx;
  background-color: #f5f5f5;
  color: #333333;
}
</style>
